<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zake chat</title>
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/jquery.min.js" ></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
    <script src="./js/tpl.js" ></script>
    <!-- zake chat plugin -->
    <script src="./js/zakeT.js" ></script>
    <script src="./js/zakePackage.js" ></script>
    <script src="./js/zakeEvent.js" ></script>
    <script src="./js/zakeChat.js" ></script>

    <style>
        .list-group-item{border:0px;border-bottom: 1px solid #ddd;margin-bottom: 0px;}
        #user_info_panel{padding: 15px 0px 15px 0px;}
        #chat_user_body_panel{height: 250px;overflow-y: scroll}
        .friend-group-item{position: relative;}
        .friend-group-item .message_badge{position: absolute;left:2px;top:0;}
        .friend-group-item .message_badge .badge{background-color:#C80A0A;}
    </style>
</head>
<body>


    <div class="container">
        <div class="row">

            <!--我的信息 begin-->
            <div class="col-md-3">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">个人信息</h3>
                    </div>
                    <div class="panel-body" id="user_info_panel">
                        <!-- 用户信息 begin -->
                        <!-- 用户信息 end -->
                    </div>
                </div>


            </div>
            <!--我的信息 end-->


            <!-- 聊天窗口 begin -->
            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="chat-title" id="chat_title_panel"></span>
                        </h3>
                    </div>
                    <div class="panel-body" id="chat_user_body_panel">
                        <!-- 聊天窗口 begin -->



                        <!-- 聊天窗口 end -->
                    </div>


                    <div class="panel-footer">

                        <div class="row">
                            <div class="col-xs-10">
                                <input type="hidden" name="from_id" id="post_from_id" value="0">
                                <input type="hidden" name="to_id" id="post_to_id" value="0">
                                <input type="text" name="post_message" id="post_message" class="form-control disabled" placeholder="请输入发送内容">
                            </div>
                            <div class="col-xs-2">
                                <button type="button" class="btn btn-success disabled" id="post_message_btn">发送</button>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
            <!-- 聊天窗口 end -->


            <!-- 好友列表 begin -->
            <div class="col-md-3">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">好友列表</h3>
                    </div>
                    <div class="panel-body" style="padding: 0px 0px 15px 0px;">
                        <ul class="list-group" id="friend_list_panel">
                            <!-- 好友列表-1 start-->
                            <!-- 好友列表-1 end-->
                        </ul>
                    </div>
                </div>

            </div>
            <!-- 好友列表 end -->
        </div>
    </div>

</body>
</html>




<!-- 模板 个人信息 登陆成功，渲染当前登陆用户-->
<script id="user_info_panel_tpl" language="text/html">
    <ul class="list-group">
        <li class="list-group-item" data-userinfo="@{D.userJsonString}">
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object img-rounded" src="@{D.face}" alt="..." style="width: 64px; height: 64px;">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">@D.nickName</h4>
                    <div class="media-heading text-muted">@D.sessionId</div>
                </div>
            </div>
        </li>
        <li class="list-group-item">相册</li>
        </ul>
</script>



<!-- 模板 好友列表-->
<script id="friend_list_panel_tpl" language="text/html">

    <li class="list-group-item friend-group-item" id="friend_info_panel_@{D.id}" data-userinfo="@{D.userJsonString}">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object img-rounded" src="@{D.face}" alt="..." style="width: 40px; height: 40px;">
                </a>
            </div>
            <div class="media-body">
                <h5 class="media-heading">@D.nickName</h5>
                <div class="media-heading text-muted session_panel">@D.sessionId</div>
            </div>
            <div class="message_badge"><span class="badge">0</span></div>
        </div>
        <div class="hidden message_list_panel">

        </div>
    </li>

</script>




<!-- 模板 聊天 发送-->
<script id="chat_sender_panel_tpl" language="text/html">

    <div class="media">
        <div class="media-body">
            <div class="media-heading text-muted text-right">@{D.from.nickName}</div>
            <div class="well well-sm">
                @{D.body}
            </div>
        </div>
        <div class="media-right">
            <a href="#">
                <img class="media-object img-rounded" src="@{D.from.face}" alt="..." style="width: 64px; height: 64px;">
            </a>
        </div>
    </div>


</script>


<!-- 模板 聊天 接收-->
<script id="chat_receiver_panel_tpl" language="text/html">

    <div class="media" data-from="@{D.from}" data-to="@{D.to}" data-body="@{D.body}" data-type="@{D.type}">
        <div class="media-left">
            <a href="#">
                <img class="media-object img-rounded" src="@{D.from.face}" alt="..." style="width: 64px; height: 64px;">
            </a>
        </div>
        <div class="media-body">
            <div class="media-heading text-muted">@{D.from.nickName}</div>
            <div class="well well-sm">
                @{D.body}
            </div>
        </div>
    </div>


</script>